Tampilkan postingan dengan label Tips Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tips Blogger. Tampilkan semua postingan

Sabtu, 07 Januari 2012

Memasang iklan AdsenseCamp di blogger

Iklan ini dapat di pasang di postingan atau di widget sesuai dengan keinginan sobat. sobat harus mendapatkan script iklan dari AdsenseCamp terlebih Dahulu.

1. silahkan klik Di sini Untuk Sign In Di AdsenseCamp


2. Pada menu adsensecamp Sobat klik Publiser =>> Pasang Script Iklan

3. setelah itu atur iklan sesuai keinginan sobat.


Ket :
  • Pilih Ukuran : Jenis ukuran yang sobat kehendaki.
  • Pilih Chanel : Blog atau website yang akan di beri iklan.

4. Lihat di bawah untuk melihat hasil iklan,sobat klik Pilih Tampilan iklan ini Untuk mendapat kan script iklannya. Apabila sobat menghendaki iklan yang berbentuk banner sobat tinggal memberikan tanda centang di bawah Preview channel iklan.




5. sobat copy script iklan yang sudah ada di kotak ( yang saya beri kotak berwarna merah )


Sekarang sobat sudah mendapatkan script iklan,sekarang sobat tinggal memasangnya di blogger.
1. sebelum itu sobat harus Log In dulu di Blogger.com
2. setelah itu sobat klik Dasbor =>> Tata Letak =>> Eleman Laman


3. Pada kolom yang akan di beri iklan sobat klik Tambah gadget=>> Tambah Html




4. kemudian pastekan code script yang sobat copy dari AdsenseCamp Ke halaman Html.


5. SIMPAN...
»»  READMORE...

Rabu, 04 Januari 2012

Cara Membuat Tombol Next Page Pada Blog

Pada postingan kali ini saya akan berbagi artikel tentang cara membuat tombol next page pada blog, yang mana tombol ini berfungsi buat mengarahkan para pengunjung untuk melihat halaman demi halaman yang berada pada blog kita berdasarkan angka yang tertera dalam tombol tersebut.
Artikel ini diperuntukkan buat blog-blog yang memang templatenya belum memiliki tombol next page, dan apabila template blog anda sudah memilikinya tombol next page ini, silahkan anda abaikan saja segera artikel ini namun anda jangan segera keluar dari blog saya ini dan anda saya perintahkan untuk segera mencari artikel-artikel lain yang ada pada blog Catatan Pena ini...oke...! ( galak amat ya...ini mah pemaksaan namanya bos...hehehehehe...).
Bila anda masih bingung juga seperti apakah tampilannya, silahkan anda lihat gambar seperti yang ada dibawah ini.

Bagaimana...sudah jelaskah gambarnya...? apabila sudah jelas, kini kita akan mulai ke cara pembuatannya. Silahkan ikuti panduannya ya...
  • Masuk ke akun blogger anda. ( ingat blog anda...bukan blog orang lain...! )
  • Pada  tampilan Dashboard klik Design kemudian klik Edit HTML
  • Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.
  • Centang kotak kecil yang bertuliskan Expand Template Widged.
  • Silahkan anda cari kode ]]></b:skin>
  • Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin>
 
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

  • Kemudian cari kode </body>
  • Copy kode yang ada dibawah ini dan paste kan diatas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>

  • Dan terakhir silahkan Save Template anda.
Bagaimana mudah bukan...? silahkan anda mencobanya.
»»  READMORE...

Selasa, 03 Januari 2012

Cara Membuat Daftar Isi Otomatis Di Blog

Kali ini kita akan membahas tentang cara membuat daftar isi otomatis di blog.Daftar isi adalah sesuatu yang sangat penting dalam sebuah blog,karena dengan adanya daftar isi,maka para pengunjung akan lebih mudah menjelajai setiap postingan blog kita.Daftar isi ini bisa sobat pasang di sidebar,postingan ataupun halaman.Kalau saya memasang daftar isi di halaman blog saya,coba klik disini.Silahkan sobat ikuti beberapa langkah berikut.


Cara Membuat Daftar Isi Di Sidebar.

1.Login ke akun blogger sobat.
2.Klik menu RANCANGAN.
3.Klik Tambah Gadget  
4.Pilih/klik HTML/Javascipt.
5.Masukan kode berikut

<script src="http://kcdaftarisi.googlecode.com/files/daftarisi.js" type="text/javascript">
</script>
<script src="http://www.andreykusanagi.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti tulisan www.andreykusanagi.com dengan alamat blog sobat.

6.Klik SIMPAN.
7.Selesai

Bagi sobat yang menggunakan antarmuka blogger yang diperbarui,ikuti lankah-langkah berikut.

1.Login ke akun blogger sobat.
2.Klik menu Layout.
3.Klik Tambah Gadget  

4.Pilih/klik HTML/Javascipt.
5.Masukan kode berikut

<script src="http://kcdaftarisi.googlecode.com/files/daftarisi.js" type="text/javascript">
</script>
<script src="http://www.andreykusanagi.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti tulisan www.andreykusanagi.com dengan alamat blog sobat.

6.Klik SIMPAN.
7.Selesai

Cara Membuat Daftar isi Blog Di Halaman

 1.Login ke akun blogger sobat.
 2.Klik Entri Baru.
3.Klik Edit Laman.
4.Klik Tambah Laman.
5.Karena kode daftar isi ini berbentuk kode javascript,maka Edit HTML pada kotak posting.
6.Setelah Itu,masukan kode berikut di dalam kotak posting.

<script src="http://kcdaftarisi.googlecode.com/files/daftarisi.js" type="text/javascript">
</script>
<script src="http://www.andreykusanagi.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti tulisan www.andreykusanagi.com dengan alamat blog sobat.

7.Terakhir,klik TERBITKAN ENTRI.
8.Selesai.

bagaimana hasilnya? Apakah bagus?,Semoga postingan saya tentang cara membuat daftar isi di blog dapat bermanfaat untuk semua sobat sekalian.Jangan lupa tulis komentarnya ya,,,,.
»»  READMORE...

Pasang Sms Online Gratis Di Blog

Panduan Blogspot kali ini akan membahas cara memasang sms online gratis di blog.Widget sms online gratis ini bisa sobat pasang di sidebar blog sobat.Dengan adanya widget sms online gratis ini,para pengunjung blog sobat bisa menggunakan widget ini.Jika sobat tertarik untuk memasang widget sms online gratis ini,silahkan ikuti beberapa langkah berikut.


1.Login ke akun blogger sobat
2.Klik menu RANCANGAN
3.Klik Tambah Gadget
4.Lalu pilih/klik HTML/Javascript
5.Masukan kode di bawah ini
<iframe height="350" name="I2" src="http://sms-online.web.id/widget" width="270">&amp;amp;lt;p&amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;not support&amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;</iframe>

6.Lalu Klik SIMPAN
7.Selesai


Bagi sobat yang menggunakan tampilan antarmuka blogger yang diperbarui,ikuti langkah berikut


1.Login ke akun blogger sobat
2.klik menu Layout
3.Klik Tambah Gadget
4.Lalu pilih/klik HTML/Javascript
5.Masukan kode di bawah ini

<iframe height="350" name="I2" src="http://sms-online.web.id/widget" width="270">&amp;amp;lt;p&amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;not support&amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;</iframe>

6.Lalu Klik SIMPAN
7.Selesai

Jika sobat ikuti cara yang telah saya berikan,hasilnya akan seperti ini
 


Semoga postingan saya tentang cara memasang sms online gratis di blog dapat bermanfaat untuk sobat sekalian.Sampai jumpa di Panduan Blogspot berikutnya.
»»  READMORE...

Cara Membuat Tulisan Copyright di Blog

Panduan Blogspot kali ini kita akan membahas tentang cara membuat tulisan copyright di blog.Salah satu cara agar blog kita tampil lebih profesional,ada baiknya kita membuat tulisan copyright di template blog kita.Tulisan copyright ini juga berfungsi untuk mengetahui siapa pemilik blog,siapa yang mendesain template blog kita dan info-info yang lainnya.Untuk mempersingkay waktu,ayo langsung saja kita mulai cara membuat tulisan copyright di blog.


Ikuti langkah-langkah berikut ini :
1Login ke akun blogger sobat
2.Klik menu RANCANGAN
3.Pilih/Klik Edit HTML
4.Cari kode  ]]></b:skin>
5.Jika sudah ketemu,masukan kode berikut tepat di atas kode ]]></b:skin>  

.copyright{
text-align: center;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;}

6.Kemudian cari kode </body>
agar lebih cepat mencarinya gunakan Ctrl+F
7.Jika sudah ketemu,masukan kode di bawah ini di atas kode </body>

<div class='copyright'>Copyright &#169; 2011 di sini kata-kata yang sobat inginkan</div>

Contoh : <div class='copyright'>Copyright &#169; 2011 <a href='http://urlblogsobat.blogspot.com/'>judul blog sobat</a>powered by: <a href='http://www.blogger.com/'>Blogger</a></div>

8.Yang terakhir klik SIMPAN TEMPLATE
9.Selesai

Bagi sobat yang menggunakan antarmuka blogger yang diperbarui,silahkan ikuti langkah-langkah berikut

1.Login ke akun blogger sobat
2.Klik Menu Template
3Klik Edit HTML
4.Cari kode  ]]></b:skin>
5.Jika sudah ketemu,masukan kode berikut tepat di atas kode ]]></b:skin>  


.copyright{
text-align: center;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;}

6.Kemudian cari kode </body>
agar lebih cepat mencarinya gunakan Ctrl+F
7.Jika sudah ketemu,masukan kode di bawah ini di atas kode </body>


<div class='copyright'>Copyright &#169; 2011 di sini kata-kata yang sobat inginkan</div>

Contoh : <div class='copyright'>Copyright &#169; 2011 <a href='http://urlblogsobat.blogspot.com/'>judul blog sobat</a>powered by: <a href='http://www.blogger.com/'>Blogger</a></div>  

8.Yang terakhir klik Save Template
9.Selesai

Jika sobat ingin meletakkan tulisan copyright tersebut di sebelah kiri bawah,sobat tinggal mengganti kode float dengan left,jika ingin berada di sebelah kanan,ganti kode floatnya dengan right

Semoga artikel saya ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di Panduan Blogspot berikutnya
»»  READMORE...

Cara Memasang Meta Tags Di Blogspot

Sebenarnya kalau membahas masalah SEO, saya juga tidak begitu paham. Namun saya akan mencoba berikan tips, trik blog khususnya optimasi blog dengan pemasangan meta tags biar blog lebih SEO Frendly. Ya, saya akui tips ini sudah bukan hal baru lagi dalam postingan blog karena sobat blogger yang lain sudah banyak yang lebih dulu ngepostnya. 
Cara I :
Cara ini hanya menambahkan saja.

  • Login ke akun Blogger
  • Klik Tata Letak / Layout
  • Klik Edit HTML
  • Silahkan cari kode <title><data:blog.pageTitle/></title>
  • Kemudian letakkan kode dibawah ini tepat dibawahnya
<meta content=' Tulis deskirpsi disini' name='description'/>
<meta content='keyword1, keyword2, keyword3 ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
  • Ganti kode warna merah dengan deskripsi dan keyword Blog sobat
Cara II.
  • Silahkan cari kode seperti tadi <title><data:blog.pageTitle/></title>
  • Silahkan ganti kode tersebut dengan kode dibawah ini :
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
  • Kemudian Letakkan kode dibawah ini tepat dibawah kode tadi.
<meta expr:content='data:blog.pageTitle + " - Deskripsi blog sobat disini"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", Keyword 1, keyword 2, keyword 3, ......"' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
  • silahkan ganti tulisan yang berwarna merah pada kode diatas sesuai dengan meta tags deskripsi dan meta keyword atau kata kunci blog sobat.
Jika secara keseluruhann kode tersebut maka akan terlihat seperti bawah ini.
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/> <title><data:blog.pageName/></title>
</b:if>
<meta expr:content='data:blog.pageTitle + " - Deskripsi blog sobat disini"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", Keyword 1, keyword 2, keyword 3, ....... "' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
  • Kemudian jangan lupa Klik Save Template
Untuk meta tags keyword jangan samapai berlebihan pemasangannya karena maksimal keyword itu sendiri sekitar 200 karakter. 


Sampai disini dulu Cara Pasang Meta Tags Di Blogspot  semoga bermanfaat dan selamat mencoba..

»»  READMORE...

Sabtu, 31 Desember 2011

Cara Memasang FB Koment di Blogspot

Untuk postingan kali ini saya akan mencoba  membuat kotak box komentar dari facebook di dalam blog adalah sebagai berikut:

a.  buka perancangan edit html.
b. ceklis expand template widget.
c. cari kode ini:


<div class='post-footer-line post-footer-line-3'>
d. paste kode fb comment warna biru tepat dibawah kode yg warna merah. hasilnya akan seperti ini:

<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="5" width="480"></fb:comments>
</b:if >
</div>

PERHATIAN:
JIKA KODE DITEMPLATE ANDA MEMILIKI TANDA " / " diujungnya seperti ini:
<div class='post-footer-line post-footer-line-3' />

MAKA ANDA HARUS MENGHAPUS TANDA " / " Lalu menambahkan Penutup: </div>
JADI SEPERTI INI:

<div class='post-footer-line post-footer-line-3'>FB KOMENT</div>
Setelah dipastikan semua kode ditutup dengan benar, Save template lihat blog anda.
»»  READMORE...

Kamis, 29 Desember 2011

Cara Membuat Label / Kategori Dengan Fungsi Scroll

Label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label / kategori dalam blognya. Jika di pasang semua tentunya akan makantempat, dan mungkin bisa membuat blog jadi lambat dan tampil banyak widget.

Menu scroll tentunya sudah banyak yang tau, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :

  1. Login ke blogger dengan ID sobat tentunya.
  2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.
  3. Anggap saja sobat telah membuat judul labelnya dengan nama“Kategori”.
  4. Sekarang tuju ke Edit HTML.
  5. Klik Expand Template Widgets.
  6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan“Kategori”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.
Perhatikan saja tulisan yang cetak tebal dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</div>
</b:includable>
</b:widget>

Jangan lupa Simpan Template.Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada akan berbeda dengan blog saya jadi sesuaikan dengan blog sobat

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Silakan Mencoba...!!!!

»»  READMORE...